<template>
  <div id="equcla">
    <!-- 器材分类 -->
    <div class="header">
      <h1
        style="
          font-weight: 700;
          font-style: normal;
          font-size: 24px;
          color: #344563;
        "
      >
        器材分类
      </h1>
      <el-button

        type="primary" round size="mediu"
        @click="openAdd = true"
        >添加区域</el-button
      >
    </div>
    <div>
      <el-table
        :data="tableData"
        style="width: 100%"
        row-key="name"
        lazy
        :tree-props="{
          children: 'wfacilityClass2s',
          hasChildren: 'hasChildren',
        }"
      >
        <el-table-column
          prop="name"
          label="分类名称"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="count" label="器材数" align="center">
        </el-table-column>
        <el-table-column label="操作" width="300" align="center">
          <template slot-scope="scope">
            <el-button
              type="warning"
              plain
              size="mini"
              @click="openAddFn(scope.row.id)"
              v-if="display(scope.row) == 0"
              ><i class="el-icon-plus" style="font-size: 15px"></i
            ></el-button>
            <el-button type="primary" plain size="mini" @click="openEditFn(scope.row)"
              ><i class="el-icon-edit-outline" style="font-size: 15px"></i
            ></el-button>
            <el-button type="danger" plain size="mini" @click="openDelFn(scope.row)"
              ><i class="el-icon-delete" style="font-size: 15px"></i
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 新增 -->
    <el-dialog title="新增分类" :visible.sync="openAdd">
      <el-form :model="formAdd">
        <el-form-item label="分类名称" :label-width="formLabelWidth">
          <el-input
            v-model="formAdd.name"
            autocomplete="off"
            placeholder="请输入分类名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="openAdd = false">取 消</el-button>
        <el-button type="primary" @click="addBtn">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑 -->
    <el-dialog title="编辑分类" :visible.sync="openEdit">
      <el-form :model="formEdit">
        <el-form-item label="分类名称" :label-width="formLabelWidth">
          <el-input
            v-model="formEdit.name"
            autocomplete="off"
            placeholder="请输入分类名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="openEdit = false">取 消</el-button>
        <el-button type="primary" @click="editBtn">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 删除 -->
    <el-dialog title="删除确认" :visible.sync="openDel">
      <el-form> 删除该条客户信息后将不可恢复，确认删除？ </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="openDel = false">取 消</el-button>
        <el-button type="primary" @click="delBtn">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      openAdd: false,
      formAdd: {
        id: null,
        name: "",
      },
      openEdit: false,
      formEdit: {
        id:null,
        name:'',
      },
      openDel: false,
      formDel: {},
      formLabelWidth: "80px",
    };
  },
  methods: {
    render(){
      this.$axios.get("/dparts/list").then(({ data }) => {
      // console.log(data);
      if (data.code == 0) {
        this.tableData = data.data;
      } else {
        this.$message.error("获取数据失败！");
      }
    });
    },
    display(v) {
      for (let i = 0; i < this.tableData.length; i++) {
        if (v.name == this.tableData[i].name) {
          return 0;
        }
      }
      return 1;
    },
    openAddFn(id) {
      this.openAdd = true;
      if (id) {
        this.formAdd.id = id;
      }
    },
    addBtn() {
      if (this.formAdd.id) {
        this.$axios({
          url: "/dparts/addClass2",
          method: "post",
          data: {
            wfacilityClass1Id: this.formAdd.id,
            wfacilityClass2Name: this.formAdd.name,
          },
        }).then(({ data }) => {
          if (data.code == 0) {
            this.$message.success("添加成功！");
            this.formAdd={},
            this.render();
            this.openAdd = false;
          } else {
            this.$message.error("添加失败！");
            this.formAdd={},
            this.openAdd = false;
          }
        });
      } else {
        this.$axios({
          url: "/dparts/addClass1",
          method: "post",
          params: {
            wFacilityClass1Name: this.formAdd.name,
          },
        }).then(({ data }) => {
          if (data.code == 0) {
            this.$message.success("添加成功！");
            this.formAdd={},
            this.render();
            this.openAdd = false;
          } else {
            this.$message.error("添加失败！");
            this.formAdd={},
            this.openAdd = false;
          }
        });
      }
    },
    openEditFn(v){
      this.formEdit={...v};
      this.openEdit = true;
    },
    editBtn(){
      if(this.formEdit.wfacilityClass2s){
        this.$axios({
          url: "/dparts/updateClass1Name",
          method: "post",
          data: {
            id: this.formEdit.id,
            name: this.formEdit.name,
          },
        }).then(({ data }) => {
          if (data.code == 0) {
            this.$message.success("修改成功！");
            this.render();
            this.openEdit = false;
          } else {
            this.$message.error("修改失败！");
          }
        });
      }else{
        this.$axios({
          url: "/dparts/updateClass2Name",
          method: "post",
          data: {
            wfacilityClass2Id: this.formEdit.id,
            wfacilityClass2Name: this.formEdit.name,
          },
        }).then(({ data }) => {
          if (data.code == 0) {
            this.$message.success("修改成功！");
            this.render();
            this.openEdit = false;
          } else {
            this.$message.error("修改失败！");
          }
        });
      }
    },
    openDelFn(v){
      this.formDel={...v};
      this.openDel = true;
    },
    delBtn(){
      if(this.formDel.wfacilityClass2s){
        this.$axios({
          url: "/dparts/deleteClass1",
          params: {
            id: this.formDel.id,
          },
        }).then(({ data }) => {
          if (data.code == 0) {
            this.$message.success("删除成功！");
            this.render();
            this.openDel = false;
          } else {
            this.$message.error(data.msg);
          }
        });
      }else{
        this.$axios({
          url: "/dparts/deleteClass2",
          params: {
            id: this.formDel.id,
          },
        }).then(({ data }) => {
          if (data.code == 0) {
            this.$message.success("删除成功！");
            this.render();
            this.openDel = false;
          } else {
            this.$message.error(data.msg);
          }
        });
      }
    },
  },
  mounted: function () {
    this.render();
  },
};
</script>

<style scoped lang="less">
#equcla {
  padding: 30px;
}
#equcla > .header {
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
</style>